<template>
  <div class="app-container">
    <div class="main">
      <!-- 拿到小票数据编辑列表 -->
      <div
        v-for="(ele, index) in dataList"
        :key="index"
        style="margin-bottom: 25px"
      >
        <!-- 每项数据标题 -->
        <span style="margin-right: 10px">{{ ele.sectionTitle }}</span>
        <!-- 开关 -->
        <el-switch
          v-model="ele.printEnabled"
          :active-value="1"
          :inactive-value="0"
          @change="changeSwitch($event, ele.printEnabled)"
        />
        <!-- 每项数据内容 -->
        <div v-show="ele.printEnabled" class="act_style">
          <div v-for="(e, index2) in ele.fieldList" :key="index2" class="flex">
            <el-checkbox
              v-model="e.printEnabled"
              :true-label="1"
              :false-label="0"
              :label="e"
              @change="handleCheck($event, e.printEnabled)"
              >{{ e.fieldTitle }}</el-checkbox
            >
            <!-- 特例 含有输入框 -->
            <el-input
              style="margin-right: 4px"
              size="mini"
              v-show="e.customFlag == 1"
              v-model="e.fieldCustomContent"
              maxlength="30"
              placeholder="请输入欢迎语"
            ></el-input>
          </div>
          <!-- 索引上下键 -->
          <div class="move_btn">
            <i
              class="arrow_sty iconfont icon-jiantoushangyuan"
              @click="moveUp(index)"
              v-show="index > 0"
            ></i>
            <i
              class="arrow_sty iconfont icon-jiantouxiayuan"
              @click="moveDown(index)"
              v-show="index < dataList.length - 1"
            ></i>
          </div>
        </div>
      </div>
    </div>
    <div class="footer">
      <el-button style="width: 100px" @click="handleDefault"
        >恢复默认</el-button
      >
      <el-button style="width: 100px" type="primary" @click="handleApply"
        >应用</el-button
      >
    </div>
  </div>
</template>
<script>
export default {
  name: "TabContent",
  props: {
    linkName: String,
    activeName: String,
    list: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      dataList: this.list,
    };
  },
  watch: {
    list: {
      handler(val) {
        this.dataList = val;
        // 更新父组件数据
        this.$emit(
          "handle_change",
          this.dataList,
          this.activeName,
          this.linkName
        );
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    // 恢复默认
    handleDefault() {
      this.$emit("handle_default");
    },
    // 点击应用
    handleApply() {
      this.$emit("handle_apply", this.dataList);
    },
    // 上移键
    moveUp(index) {
      const box = this.dataList.splice(index, 1)[0];
      this.dataList.splice(index - 1, 0, box);
    },
    // 下移键
    moveDown(index) {
      const box = this.dataList.splice(index, 1)[0];
      this.dataList.splice(index + 1, 0, box);
    },
    // 选中 选项
    handleCheck(e, val) {
      val = val == "0" ? "1" : "0";
    },
    // 开关 是否全选
    changeSwitch(e, val) {
      val = val ? 0 : 1;
    },
  },
};
</script>
<style lang="scss" scoped>
.footer {
  text-align: center;
  margin-top: 20px;
}
.move_btn {
  margin-left: auto;
}
.arrow_sty {
  font-size: 1.2rem;
  margin-right: 10px;
}
.act_style {
  flex: 1;
  background-color: #f6f4f4;
  padding: 10px 20px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  word-wrap: break-word;
  white-space: normal;
  flex-wrap: wrap;
  .el-checkbox {
    margin: 4px 30px 4px 0;
  }
  margin: 8px 0;
}
.flex {
  display: flex;
}
// icon图标
@font-face {
  font-family: "iconfont"; /* Project id 4438690 */
  src: url('//at.alicdn.com/t/c/font_4438690_m0oiuik2zur.woff2?t=1708401857232') format('woff2'),
       url('//at.alicdn.com/t/c/font_4438690_m0oiuik2zur.woff?t=1708401857232') format('woff'),
       url('//at.alicdn.com/t/c/font_4438690_m0oiuik2zur.ttf?t=1708401857232') format('truetype');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 22px;
  font-style: normal;
  color: #409EFF;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-jiantouxiayuan:before {
  content: "\e857";
  color: #409EFF;
}

.icon-jiantoushangyuan:before {
  content: "\e856";
  color: #409EFF;
}

</style>
